<template>
  <view class="user-box" v-if="userInfoStore.userInfo.userId != 0">
    <!-- 用户基本信息 -->
    <view class="user-info">
      <!-- 身份码 -->
      <view class="user-info-code">
        <text>Baby幸福小镇</text>
        <view>
          <image src="https://www.lyzhnb.top/wf/wf-.jpg" mode="widthFix" />
          <text>身份码</text>
        </view>
      </view>
      <!-- 用户相关信息 -->
      <view class="user-info-detail">
        <image :src="userInfoStore.userInfo.avatar" mode="aspectFill" />
        <view class="user-info-detail-content">
          <view class="user-info-detail-content-name">{{ userInfoStore.userInfo.username }}</view>
          <view>{{ userInfoStore.userInfo.registrationTime }}</view>
        </view>
      </view>
    </view>

    <!-- 我的订单或预约功能列表 -->
    <view class="user-order-appointments">
      <view class="user-order-appointments-header">
        <text>我的订单、预约</text>
      </view>
      <view class="user-order-appointments-content">
        <view class="user-order-appointments-content-item" v-for="(item) in orderAppointmentsList" :key="item.id"
          @click="toDetail(item.navigator, item.msg)">
          <image :src="item.image" mode="scaleToFill" />
          <text>{{ item.msg }}</text>
        </view>
      </view>
    </view>


    <!-- 列表功能选项 -->
    <view class="user-function">
      <!-- 主要功能列表选项 -->
      <view class="user-function-item" v-for="item in listFeaturesMain" :key="item.id"
        @click="toDetailMain(item.navigator)">
        <view class="user-function-item-left">
          <image :src="item.image" mode="scaleToFill" />
          <text>{{ item.msg }}</text>
        </view>
        <image src="../../static/images/user/right-arrow.png" mode="scaleToFill" />
      </view>
      <!-- 权限功能列表选项 -->
      <view class="user-function-item" v-for="item in listFeatures" :key="item.id" @click="toDetail(item.navigator)">
        <view class="user-function-item-left">
          <image :src="item.image" mode="scaleToFill" />
          <text>{{ item.msg }}</text>
        </view>
        <image src="../../static/images/user/right-arrow.png" mode="scaleToFill" />
      </view>
    </view>

  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUpdate, onUpdated, onActivated, onDeactivated, onBeforeUnmount } from "vue"

import { useUserStore } from "../../pinia/user";

//全局状态
const userInfoStore = useUserStore();

//订单、预约功能列表
const orderAppointmentsList = ref([{
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "全部订单", //功能描述
  navigator: "/subpkg/goods_order/goods_order", //功能跳转路径
}, {
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "待评价", //功能描述
  navigator: "/subpkg/goods_order/goods_order", //功能跳转路径
}, {
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "待收货", //功能描述
  navigator: "/subpkg/goods_order/goods_order", //功能跳转路径
}, {
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "待发货", //功能描述
  navigator: "/subpkg/goods_order/goods_order", //功能跳转路径
}, {
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "购物车", //功能描述
  navigator: "/subpkg/goods_detail/goods_detail", //功能跳转路径
}])

//主要功能列表
const listFeaturesMain = ref([{
  id: "2", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "购物车", //功能描述
  navigator: "/pages/cart/cart", //功能跳转路径
}])

//功能列表
const listFeatures = ref([{
  id: "12", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "个人信息", //功能描述
  navigator: "/subpkg/user_info/user_info", //功能跳转路径
}, {
  id: "21", //id
  image: "../../static/images/user/user.png", //功能图片路径
  msg: "卡卷信息", //功能描述
  navigator: "/subpkg/goods_detail/goods_detail", //功能跳转路径
}])

//跳转主要功能页面
const toDetailMain = (item: string) => {
  uni.switchTab({ url: item })
}

//跳转页面
const toDetail = (item: string, msg?: string) => {
  let path = item;
  if (msg) {
    path += ("?id=" + msg);
  }
  uni.navigateTo({
    url: path
  })
}

// 组件周期函数--监听组件挂载完毕
onMounted(() => {

})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {

})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {

})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {

})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {

})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {

}) 
</script>

<style scoped lang="scss">
.user-box {
  background-color: $uni-bg-color;

  .user-info {
    padding: 20rpx;
    background-color: $uni-box-color;
    margin: 20rpx 0;


    .user-info-code {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20rpx;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 15rpx;
      }

      view {
        display: flex;
        align-items: center;
      }
    }

    .user-info-detail {
      display: flex;
      align-items: center;

      image {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .user-info-detail-content {

        .user-info-detail-content-name {
          font-size: 40rpx;
          font-weight: bolder;
        }
      }
    }

  }

  .user-order-appointments {
    margin: 20rpx 0 0;
    background-color: $uni-box-color;

    .user-order-appointments-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx;
      font-size: 28rpx;
    }

    .user-order-appointments-content {
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding: 20rpx;

      .user-order-appointments-content-item {
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        font-size: 26rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }

  .user-function {
    padding: 20rpx;

    .user-function-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 90rpx;
      background-color: $uni-box-color;
      padding: 0 20rpx;

      .user-function-item-left {
        display: flex;
        align-items: center;

        image {
          margin-right: 20rpx;
        }
      }

      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}
</style>